<template>
	<view>
		<view class="slider-box">
			<view class="sider-flex"></view>
			
			<movable-area class="sliderBar" :style="{ width: 100 - minVal + '%' }">
				<view class="gone" :style="{ 
					width: x + 'px', 
					transition: 'all 0.3s',
					background: `url(${commonConfigs.domainFrontFileLink}/files/images/openbox/rate-cursor-process-2.png) 0 0 no-repeat`,
					backgroundSize: 'cover',
				}"></view>
				
				<movable-view class="slider" :x="x" :y="y" direction="all" @change="onChange">
				<!-- <movable-view class="slider" direction="all" @change="onChange"> -->
					<view class="slider-cursor flex-justify-content-center" :style="{ 
						'font-size': text_fs,
						'background': `url(${commonConfigs.domainFrontFileLink}/files/images/openbox/cursor-box-bg-2.png) 0 0 no-repeat`,
						'backgroundSize': 'cover',
						
					}">
						<view class="absolute slider-cursor-txt text-nowrap">{{ x }} - {{ isInit ? initRateVal : score }}%</view>
					</view>
					<image :src="icon" mode="widthFix" :style="{ width: icon_w, height: icon_h }"></image>
				</movable-view>
			</movable-area>
			
			<view :style="{ width: 100 - maxVal + '%' }"></view>
		</view>
	</view>
</template>

<script>
	import { throttleFun, debounceFun, setAsyncFunWait } from '@/setupproject/TOOLS_FUN';
	export default {
		name: 'comRateSlider',
		props: {
			color: {
				type: String,
				default: '#89f6ac'
			},
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 100
			},
			icon: {
				type: String,
				default: 'https://web-assets.dcloud.net.cn/unidoc/zh/hx.png'
			},
			icon_w: {
				type: String,
				default: '40rpx'
			},
			icon_h: {
				type: String,
				default: '54rpx'
			},
			text_color: {
				type: String,
				default: '#89f6ac'
			},
			text_fs: {
				type: String,
				default: '26rpx'
			},
			initRateVal: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				slideBarWidth: 0,
				minVal: this.min ? this.min : 0,
				maxVal: this.max ? this.max : 100,
				x: 0,
				y: 0,
				score: 0,
				isInit: true,
			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		created() {
			this.$nextTick(() => {
				//#ifdef MP-WEIXIN
				let dom = uni.createSelectorQuery().in(this);
				//#endif

				//#ifndef MP-WEIXIN
				let dom = uni.createSelectorQuery();
				//#endif
				dom.select('.slider-box')
					.boundingClientRect(res => {
						this.slideBarWidth = res.width;
					})
					.exec();
			});
		},
		methods: {
			// onChange(e, i) {
			// 	this.isInit = false;
			// 	this.x = e.detail.x;
			// 	this.score = parseInt((e.detail.x / this.slideBarWidth) * 100) + parseInt(this.minVal);
			// 	this.$emit('rateChange', this.score);
			// }
			onChange: debounceFun(async function(e, i){
				// if(this.initRateVal == e.detail.x) {
				// 	this.x = this.initRateVal;
				// 	this.score = parseInt((this.initRateVal / this.slideBarWidth) * 100) + parseInt(this.minVal);
				// 	console.log("onChange this.x:", this.x, this.score);
				// 	return;
				// }
				this.isInit = false;
				this.x = e.detail.x;
				this.score = parseInt((e.detail.x / this.slideBarWidth) * 100) + parseInt(this.minVal);
				console.log("onChange this.x:", this.x, this.score);
				// await setAsyncFunWait(1000);
				await this.$emit('rateChange', this.score);
			}, 500, false),
		}
	};
</script>

<style lang="scss">
	.slider-box {
		display: flex;
		width: 100%;
		height: 32rpx;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			height: 13rpx;
			border-radius: 8rpx;
			background: url('https://cdn2.kong1001.com/apps/front/files/images/openbox/rate-cursor-bg.png') 0 0 no-repeat;
			background-size: cover;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 100%;
		}

		.sider-flex {
			flex: 1;
			height: 13rpx;
			border-radius: 8rpx 0 0 8rpx;
			margin-top: 12rpx;
			position: relative;
			z-index: 1;
		}

		.sliderBar {
			height: 100%;
			border-radius: 8rpx;
			width: 100%;

			.gone {
				height: 100%;
				position: absolute;
				left: 0;
				// height: 18rpx;
				top: 0rpx;
				max-width: 100%;
				z-index: 1;
				border-radius: 0 8rpx 8rpx 0;
			}

			.slider {
				width: 0;
				height: 100%;
				position: relative;
				z-index: 2;

				image {
					position: absolute;
					border-radius: 16rpx;
					transform: translatex(-50%);
				}

				.slider-cursor {
					position: absolute;
					min-width: 90rpx;
					padding: 0 8rpx;
					height: 44rpx;
					color: #3A1900;
					top: 30rpx;
					left: 50%;
					text-align: center;
					transform: translateX(-50%);
					
					.slider-cursor-txt {
						bottom: 0;
						height: 32rpx;
						line-height: 32rpx;
					}

					&::after {
						content: '';
						position: absolute;
						border: 6rpx solid transparent;
						top: 99%;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
</style>